<template>
    <div ref="scrollbar" class="scrollbar" style="width: 100%; height: 100%;" >
        <slot></slot>
        <!--<back-top :back2topStyle="back2topStyle" v-if="showBack2top" @back2top="back2top"></back-top>-->
    </div>
</template>

<script>
    import Scrollbar from 'smooth-scrollbar';
    import BackTop from '@/components/BackTop';
    export default {
        name: 'scrollbar',
        components: {
            BackTop
        },
        props: {
            initOptions: {
                default: function () {
                    return {};
                }
            },
            showBack2top: {
                type: Boolean,
                default: true
            },
            back2topStyle: {
                type: Object,
                default: function(){
                    return {};
                }
            }
        },
        mounted() {
            this.scrollbar().addListener((status) => {
            
            });
        },
        methods: {
            scrollbar() {
                return Scrollbar.init(this.$refs.scrollbar, this.initOptions);
            },
            back2top(x, y, speed) {
                this.scrollbar().scrollTo(x, y, speed);
            }
        }
    }
</script>

<style lang="scss" scoped>
    
    .scrollbar {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

</style>
